<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>欠款审核</title>
<%@include file="/jsp/common/inc.jsp"%>
<script type="text/javascript">
	var grid;// 欠款信息
	$(function() {
		grid = $("#grid").datagrid({
			url : "${pageContext.request.contextPath}/qkController/datagrid",
			striped : true,
			rownumbers : true,
			pagination : true,
			singleSelect : true,
			fitColumns : true,
			idField : "id",
			pagesize : 10,
			pageList : [10,20,30],
			toolbar : "#toolbar",
			columns : [ [ {
				width : 100,
				title : "分店",
				field : "branchName"
			},{
				width : 100,
				title : "开始日期",
				field : "startDateStr"
			},{
				width : 100,
				title : "开始日期",
				field : "endDateStr"
			}, {
				width : 100,
				title : "欠款类型",
				field : "qkTypeName"
			},{
				width : 100,
				title : "欠款金额",
				field : "sum"
			},{
				width : 100,
				title : "操作",
				field : "action",
				formatter : function(value,rowData,rowIndex) {
					var str = "<button onclick='settleFun(" + rowIndex + ")'>结算</buttion>";
					return str;
				}
			} ] ]

		});
	});
	function searchFun(){
		if($("#_form").form("validate")){
			grid.datagrid("load",sy.serializeObject($("#_form")));
		};
	}
	
	// 查询条件列表
	$(function(){
		$("#branchId").combobox({
			url : "${pageContext.request.contextPath}/commonController/branchList",
			valueField : 'id',
			textField : 'branchName',
			width : 100,
		});
		$("#qkTypeId").combobox({
			url : "${pageContext.request.contextPath}/commonController/qktypeList",
			valueField : 'id',
			textField : 'name',
			width : 100,
		});
	});

	// 清空查询条件
	function clearFun(){
		$("#_form").find("input").val("");
		grid.datagrid("load",{});
	}
	
	// 同步数据
	function synData() {
		var url = "${pageContext.request.contextPath}/qkController/synData";
		$.post(url, null, function(result) {
			if (result.success) {
				grid.datagrid("load");
				$.messager.alert("提示:", result.msg, "info");
			} else {
				$.messager.alert("提示:", result.msg, "error");
			}
		}, "json");
	}
	// 显示结算信息输入框
	function settleFun(rowIndex){
		var row = grid.datagrid("getRows")[rowIndex];
		$('#dlg').dialog('open').dialog('setTitle','编辑');
        $("#editForm").form("load",row);
	};
	// 保存结算信息
	function saveFun(){
		$('#editForm').form('submit',{
            url: "${pageContext.request.contextPath}/qkController/settle",
            success: function(result){
            // 转化为js对象
           	 var res = $.parseJSON(result);
             console.info(res);
             if(res.success){
            	 $('#dlg').dialog('close');
            	 grid.datagrid('load');
            	 $.messager.alert("提示:","操作成功","info");
             }else{
            	 $.messager.alert("提示",res.msg,"error");
             }
           }
        });
	}
	// 开始日期和结束日期
	$(function(){
	    $('#startDateStr').datebox({
	        required:true
	        });
	    $('#endDateStr').datebox({
	        required:true
	      });
	    $('#settleDate').datebox({
	    	width:150,
	        required:true
	      });
	})
	
</script>
</head>
<body class="easyui-layout" data-options="fit:true,border:false">
	<div id="toolbar" style="display: none;">
		<form id="_form">
			<table>
				<tr>
					<td>分店</td>
					<td>
						<input id="branchId" name="branchId" />
					</td>
					<td>欠款类型</td>
					<td>
						<input id="qkTypeId" name="qkTypeId" />
					</td>
				</tr>
				<tr>
					<td>开始日期</td>
					<td>
						<input id="startDateStr" name="startDateStr"  />
					</td>
					<td>结束日期</td>
					<td>
						<input id="endDateStr" name="endDateStr"  />
					</td>
					<td><a href="#" class="easyui-linkbutton" onclick="searchFun()">查询</a></td>
					<td><a href="#" class="easyui-linkbutton" onclick="clearFun()">清空</a></td>
				</tr>
				<tr>
					<td><a href="#" class="easyui-linkbutton" onclick="synData()">同步数据</a></td>
				</tr>
			</table>
		</form>
	</div>
	<div data-options="region:'center',fit:true,border:false">
		<table id="grid" data-options="fit:true,border:false"></table>
	</div>
	
	<!-- 结算弹出框  -->
	<div id="dlg" class="easyui-dialog" style="width:560px;height:280px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
        <form id="editForm" method="post" novalidate>
           <input name="branchId" id="branchId" type="hidden" />
           <input name="qkTypeId" id="qkTypeId" type="hidden" />
           <input name="sum" id="sum" type="hidden" />
           <fieldset>
			<legend>结算信息</legend>
			<table style="width: 100%">
				<tr>
					<td>开始日期</td>
					<td><input name="startDateStr" id="startDateStr" class="easyui-textbox" readonly="true"/></td>
					<td>结束日期</td>
					<td><input name="endDateStr" id="endDateStr" class="easyui-textbox" readonly="true"/></td>
				</tr>
				<tr>
					<td>欠款类型</td>
					<td><input name="qkTypeName" id="qkTypeName" class="easyui-textbox" readonly="true"/></td>
					<td>结算金额</td>
					<td><input name="settleAmount" id="settleAmount" class="easyui-textbox easyui-numberbox" 
					       maxlength="12"  data-options="precision:2"/></td>
				</tr>
				<tr>
					<td>结算日期</td>
					<td><input id="settleDate" name="settleDate" /></td>
				</tr>
			</table>
		</fieldset>
        </form>
    </div>
  
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="saveFun()" style="width:90px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
    </div>
	
</body>
</html>